<template>
	<view class="page">
		<mescroll-uni ref="mescrollRef" height="100%" top="0" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
		 @up="upCallback">
		<view class="business_info">
			<view class="business_info_thumb">
				<image src="/static/img/1.jpg" mode="widthFix"></image>
			</view>
			<view class="business_info_text">
				<view class="title">商家名称</view>
				<view class="rate"><uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate></view>
				<view class="price">累计服务次数</view>
			</view>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
			 @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view class="content-text">
				
					<view class="daifukuan_box">
						<view class="daifukuan_item" @click="handleDetail">
							<view class="order_num">
								订单编号：20200635XSD1234
							</view>
							<view class="order_main">
								<view class="order_thumb">
									<image src="/static/menus/12.png" mode="widthFix"></image>
								</view>
								<view class="order_text">
									<view class="title">开锁换锁</view>
									<view class="price">预算：<text>面议</text> </view>
									<view class="price">服务时间：<text>2020-07-01 18:00-20:00</text> </view>
								</view>
							</view>
							<view class="order_btn_group clearfix">
								<view class="order_btn_2 fr">接单</view>
								<view class="order_btn_1 fr">拒单</view>
							</view>
						</view>
						<view class="daifukuan_item">
							<view class="order_num">
								订单编号：20200635XSD1234
							</view>
							<view class="order_main">
								<view class="order_thumb">
									<image src="/static/menus/11.png" mode="widthFix"></image>
								</view>
								<view class="order_text">
									<view class="title">开锁换锁</view>
									<view class="price">预算：<text>面议</text> </view>
									<view class="price">服务时间：<text>2020-07-01 18:00-20:00</text> </view>
								</view>
							</view>
							<view class="order_btn_group clearfix">
								<view class="order_btn_2 fr">接单</view>
								<view class="order_btn_1 fr">拒单</view>
							</view>
						</view>
						<view class="daifukuan_item">
							<view class="order_num">
								订单编号：20200635XSD1234
							</view>
							<view class="order_main">
								<view class="order_thumb">
									<image src="/static/menus/5.png" mode="widthFix"></image>
								</view>
								<view class="order_text">
									<view class="title">开锁换锁</view>
									<view class="price">预算：<text>面议</text> </view>
									<view class="price">服务时间：<text>2020-07-01 18:00-20:00</text> </view>
								</view>
							</view>
							<view class="order_btn_group clearfix">
								<view class="order_btn_2 fr">接单</view>
								<view class="order_btn_1 fr">拒单</view>
							</view>
						</view>
					</view>
			</view>
		</view>
		
		</mescroll-uni>
		<uni-section title="Style" type="line"></uni-section>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-ui/uni-segmented-control/uni-segmented-control.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			uniSegmentedControl,
			uniRate
		},
		data() {
			return {
				items: ['待接单', '已接单', '已拒单', '已完成'],
				colors: ['#368AFF'],
				current: 0,
				colorIndex: 0,
				activeColor: '#368AFF',
				styleType: 'text',
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					}
				}
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			styleChange(e) {
				if (this.styleType !== e.detail.value) {
					this.styleType = e.detail.value
				}
			},
			colorChange(e) {
				if (this.styleType !== e.detail.value) {
					console.log(e.detail.value);
					this.activeColor = e.detail.value
				}
			},
			downCallback() {
				//联网加载数据
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				// let params = {
				// 	page_size: page.size,
				// 	page: page.num,
				// 	random_str: this.$dokey.getRandom(),
				// 	timestamp: this.$dokey.getTime(),
				// 	method: 'website.mould.log.list',
				// 	sign: this.$md5(this.$dokey.secretdate('website.mould.log.list'))
				// }
				// requestAll(params).then(resp => {
				// 	if (resp.code == 1) {
				// 		let data = resp.response_data
				// 		if (page.num == 1) this.dataArray = []; //如果是第一页需手动制空列表
				// 		this.dataArray = this.dataArray.concat(data.list); //追加新数据
				// 		if (page.num == 1) this.previewList = []
				// 		this.previewList = this.previewList.concat(data.list);
				// 		this.pageTotal = data.total_page
				// 		this.mescroll.endByPage(data.list.length, this.pageTotal);
				// 	}
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
			handleDetail () {
				uni.navigateTo({
					url:"/pages/my/my_order/my_order_detail"
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	@import '@/common/uni-nvue.scss';

	.page {
		box-sizing: border-box;

		.example-body {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 0;
		}


		.uni-padding-wrap {
			position: sticky;
			left: 0;
			top: 0;
			width: 750rpx;
			background-color: #fff;
			border-bottom: 25rpx solid #F4F4F4;
			z-index: 1;
		}

		.content {
			position: relative;
			z-index: 0;
		}

		.content-text {
			font-size: 18px;
			color: $uni-text-color;
		}

		.color-tag {
			width: 25px;
			height: 25px;
		}

		.uni-list {
			flex: 1;
		}

		.uni-list-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex: 1;
			flex-direction: row;
			background-color: #FFFFFF;
		}


		.uni-list-item__container {
			padding: 12px 15px;
			width: 100%;
			flex: 1;
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			box-sizing: border-box;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom-style: solid;
			border-bottom-width: 1px;
			border-bottom-color: $uni-border-color;
		}

		.uni-list-item__content-title {
			font-size: 16px;
		}

		// 内容的修改
		.daifukuan_box {
			.daifukuan_item {
				padding: 0 33rpx 33rpx;
				border-bottom: 25rpx solid #F4F4F4;

				.order_num {
					padding: 33rpx 0;
					margin-bottom: 33rpx;
					border-bottom: 1px solid rgba($color: #000000, $alpha:.1);
					font-size: 28rpx;
					color: #565656;
				}

				.order_main {
					display: flex;

					.order_thumb {
						width: 157rpx;
						height: 157rpx;
						margin-right: 33rpx;
						border-radius: 8rpx;
						overflow: hidden;
						image {
							width: 100%;
							min-height: 100%;
						}
					}

					.order_text {
						flex: 1;

						.title {
							// margin-bottom: 28rpx;
							line-height: 180%;
							font-size: 32rpx;
							color: #565656;
						}

						.price {
							// margin-bottom: 16rpx;
							line-height: 180%;
							font-size: 26rpx;
							color: #B3B3B3;

							text {
								font-size: 26rpx;
								color: #565656;
							}

							&:last-child {
								margin-bottom: 0;
							}
						}
					}

				}

				.order_btn_group {
					padding-top: 50rpx;
						view {
							margin-left: 33rpx;
						}
					.order_btn_1 {
						width: 161rpx;
						height: 63rpx;
						line-height: 61rpx;
						border-radius: 33rpx;
						border: 1px solid rgba(179, 179, 179, 1);
						box-sizing: border-box;
						text-align: center;
						font-size: 28rpx;
						color: #565656;
					}

					.order_btn_2 {
						width: 161rpx;
						height: 63rpx;
						margin-left: 33rpx;
						line-height: 63rpx;
						background: rgba(54, 138, 255, 1);
						border-radius: 33rpx;
						text-align: center;
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
		}
		.business_info {
			display: flex;
			padding: 33rpx;
			border-bottom: 25rpx solid #F4F4F4;
			.business_info_thumb {
				flex: 0 0 157rpx;
				width: 157rpx;
				height: 157rpx;
				margin-right: 33rpx;
				overflow: hidden;
				image {
					width: 100%;
					min-height: 100%;
				}
			}
			.business_info_text {
				flex: 1;
				.title {
					width: 480rpx;
					line-height: 100%;
					margin-bottom: 17rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					color: #565656;
				}
				.rate {
					margin-bottom: 17rpx;
				}
				.price {
					line-height: 100%;
					margin-bottom: 17rpx;
					font-size: 32rpx;
					color: #565656;
				}
			}
		}
		.rate {
			display: inline-block;
			font-size: 26rpx;
			color: #FC503E;
			.pingfen {
				display: inline-block;
			}
		}
	}
</style>
